<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/BX_heard.css">
    <link rel="stylesheet" href="css/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="css/layui/font">
    <link rel="stylesheet" href="css/page.css">
    <title>Document</title>
    <style>
        body {
            position: relative;
        }

        .title,
        .chart {
            margin: 10px 1.2% 1.2% 11px;
            width: 97.6%;
            height: 122px;
            background: #ffffff;
            font: 14px/61.5px 'simhei';
        }

        .selectWrop {
            float: left;
            width: 20%;
            height: 42px;
        }

        .selectWrop div {
            height: 42px;
            width: 60%;

        }

        .title input {
            margin-left: 1%;
            height: 42px;
            width: 100%;
            border-radius: 5px;
            border: 1px solid #9e9e9e;
        }

        .title span {
            margin-right: 1%;
            float: left;
        }

        #remainText {
            width: 30%;
        }

        .bottom {
            width: 100%;
            height: 61px;
        }

        .calendar {
            width: 15%;
            border: 1px solid #9e9e9e;
            margin-top: 10px;
            float: left;
            height: 42px;
            font: 14px/42px 'simhei';
            border-radius: 5px;
        }

        #calendar1,
        #calendar2 {
            position: relative;
        }

        .calendar i {
            position: absolute;
            left: 0px;
        }

        #beginday,
        #beginday1 {
            width: 80%;
            border: none;
            margin-left: 20%;
        }

        .title p {
            margin-top: 10px;
            margin-right: 3%;
            width: 10%;
            float: right;
            height: 42px;
            font: 14px/42px 'simhei';
            background: #429788;
            color: #ffffff;
            text-align: center;
            border-radius: 5px;
            cursor: pointer;
        }

        .chart {
            height: 536px;
            padding-top: 10px;
            font: 14px/40px 'simhei';
            color: #9e9e9e;
            position: relative;
        }

        .tableTitle {
            width: 96%;
            height: 40px;
            margin-left: 2%;
            border: 1px solid #9e9e9e;
            background: #ebeef5;
            table-layout: fixed;

        }

        .tableTitle td {
            border: 1px solid #9e9e9e;
        }

        .tableText {
            width: 96%;
            margin-left: 2%;
            border: 1px solid #9e9e9e;
            table-layout: fixed;
        }

        .tableText .tr {
            height: 40px;
        }

        .tableText td {
            border: 1px solid #9e9e9e;
            white-space: nowrap;
            /*控制单行显示*/
            overflow: hidden;
            /*超出隐藏*/
            text-overflow: ellipsis;
            /*隐藏的字符用省略号表示*/
        }

        .tableText tr:hover {
            background: #ebeef5;
        }

        .tableText td:nth-of-type(1) {
            width: 4%;
            text-align: center;
        }

        .tableText td:nth-of-type(2) {
            width: 10%;
        }

        .tableText td:nth-of-type(3) {
            width: 11%;
        }

        .tableText td:nth-of-type(4) {
            width: 12%;
        }

        .tableText td:nth-of-type(5) {
            width: 31%;

        }

        .textHiddden {
            position: absolute;
            left: 30%;
            top: 0px;
            background: black;
            color: #ffffff;
            /* font: 14px/40px 'simhei';
            height: 40px; */
            font-size: 14px;
            z-index: 10;
            border-radius: 7px;
            display: none;
        }

        .tableText td:nth-of-type(6) {
            width: 17%;
        }

        .tableText td:nth-of-type(7) {
            width: 11%;
            position: relative;
        }

        #oSort {
            position: relative;
        }

        #oSort i {
            position: absolute;
            cursor: pointer;
            height: 15px;
            font: 15px/15px 'simhie';
        }

        #oSort i:nth-of-type(1) {
            left: 50%;
            top: 5px;
            transform: rotate(-180deg);

        }

        #oSort i:nth-of-type(2) {
            left: 50%;
            top: 20px;
        }

        .but {
            width: 30%;
            height: 25px;
            margin-top: 5px;
            background: red;
            border-radius: 15px;
            margin-left: 10%;
            position: relative;
            cursor: pointer;
        }

        .but p {
            width: 50%;
            height: 25px;
            background: #ffffff;
            border-radius: 50%;
            position: absolute;
            left: 0px;
            top: 0px;
            float: left;
        }

        #deleat {
            font: 25px/40px 'simhei';
            position: absolute;
            left: 70%;
            top: 4px;
            cursor: pointer;
        }

        #page {
            position: absolute;
            left: 20px;
            bottom: 5px;
        }

        #remindMan {
            width: 65%;
            height: 45px;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div class="heardFont">
        <span>提醒功能</span>
    </div>
    <div class="title">
        <div class="selectWrop"><span class="module">模块</span><input type="text" id="module" placeholder="模块"
                autocomplete="off"></div>
        <div class="selectWrop"><span>提醒人</span>
            <!-- <input type="text" id="remindMan" placeholder="员工姓名" autocomplete="off">. -->
            <select name="" id="remindMan"></select>
        </div>
        <div class="selectWrop"><span>提醒事项</span><input type="text" id="remainThing" placeholder="提醒事项"
                autocomplete="off"></div>
        <div class="remainTextWrop"><span>提醒内容</span><input type="text" id="remainText" placeholder="请输入提醒内容"
                autocomplete="off"></div>
        <span>提醒时间</span>
        <div class="bottom">
            <div class="calendar" id="calendar1"><i class="layui-icon layui-icon-date"></i><input type="text"
                    class="layui-input" id="beginday" placeholder="请输入日期"></div>
            <span>&nbsp-</span>
            <div class="calendar" id="calendar2"><i class="layui-icon layui-icon-log"></i><input type="text"
                    class="layui-input" id="beginday1" placeholder="选择时间"></div>
            <p>+添加提醒</p>
        </div>
    </div>
    <div class="chart">
        <table class="tableTitle">
            <tr>
                <td style="width:4%"></td>
                <td style="width:10%">提醒人</td>
                <td style="width:11%">模块</td>
                <td style="width:12%">提醒事项</td>
                <td style="width:31%">提醒内容</td>
                <td style="width:17%" id="oSort">提醒时间
                    <i class="layui-icon layui-icon-triangle-d" id="big"></i>
                    <i id="small" class="layui-icon layui-icon-triangle-d"></i>
                </td>
                <td style="width:11%">操作</td>
            </tr>
        </table>
        <table class="tableText"></table>
        <div class="page" id="page"></div>
    </div>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script src="css/layui/layui.js"></script>
<script src="js/xlPaging.js"></script>
<script src="./js/url.js"></script>
<script>
    //页码
    $("#page").paging({
        nowPage: 1, // 当前页码
        pageNum: 10, // 总页码
        buttonNum: 1, //要展示的页码数量
        canJump: 1,// 是否能跳转。0=不显示（默认），1=显示
        showOne: 0,//只有一页时，是否显示。0=不显示,1=显示（默认）
        callback: function (num) { //回调函数
            localStorage.pageNum = num;
        }
    });
    $("#page ").on("click"," ul li",function(){
        pageNum = localStorage.pageNum;
        pageAjax(pageNum)
    })
    //页码Ajax请求
    function pageAjax(page) {
        $.ajax({
            url: SetUrl.remind.pageApply,
            type: 'get',
            dataType: 'json',
            data: {
                currentPage: page,
                asc: '1',
                rows: '10',
                method: 'remindAll'
            },
            success: function (data) {
                if (data.code == 100) {
                    console.log(data)
                    $(".tableText").html('');
                    var olist = data.result.list;
                    var num = 0;
                    for (var i = 0; i < olist.length; i++) {
                        var oremindTime = parseInt(olist[i].remindTime);
                        var newData = new Date(oremindTime);
                        var iYear = newData.getFullYear();
                        var iMonth = newData.getMonth() + 1;
                        var iDay = newData.getDate();
                        var iHour = newData.getHours();
                        var iMinutes = newData.getMinutes();
                        var iSecond = newData.getMilliseconds();
                        var iTime = iYear + '-' + iMonth + '-' + iDay + ' ' + iHour + ':' + iMinutes + ':' + iSecond;
                        num++;
                        if (olist[i].moduleId == 1) {
                            var omoduleId = '学生管理'
                        } else {
                            var omoduleId = '院校管理'
                        }
                        if (olist[i].remindTypeId == 3) {
                            var oremindTypeId = '接受量提醒'
                        } else if (olist[i].remindTypeId == 2) {
                            var oremindTypeId = '转公共量提醒'
                        } else {
                            var oremindTypeId = '待跟进量提醒'
                        }
                        $('<tr><td>' + num + '</td><td>' + olist[i].empName + '</td><td>' + omoduleId + '</td><td>' + oremindTypeId + '</td><td>' + olist[i].remindContent + '</td><td>' + iTime + '</td><td id="Aonoff"><div class="but" kaiguan="' + olist[i].remindId + '"><p></p></div><i class="layui-icon layui-icon-delete " id="deleat" deleat="' + olist[i].remindId + '"></i></td></tr>').appendTo($(".tableText"))
                        if (olist[i].remindState == 1) {
                            $('.but:eq(' + i + ')').css('background', 'green').find('p').animate({
                                left: "50%",
                            }, 500)
                        } else if (olist[i].remindState == 2) {
                            $('.but:eq(' + i + ')').css('background', 'red').find('p').animate({
                                left: "0",
                            }, 500)
                        }
                    }
                }
            }
        })
    }
    var remindId;
    var m;
    $(function () {
        //页面加载请求数据
        $.ajax({
            url: SetUrl.remind.pageApply,
            type: 'get',
            dataType: 'json',
            data: {
                currentPage: '1',
                asc: '1',
                rows: '10',
                method: 'remindAll'
            },
            success: function (data) {
                if (data.code == 100) {
                    console.log(data)
                    var olist = data.result.list;
                    var num = 0;
                    for (var i = 0; i < olist.length; i++) {
                        var oremindTime = parseInt(olist[i].remindTime);
                        var newData = new Date(oremindTime);
                        var iYear = newData.getFullYear();
                        var iMonth = newData.getMonth() + 1;
                        var iDay = newData.getDate();
                        var iHour = newData.getHours();
                        var iMinutes = newData.getMinutes();
                        var iSecond = newData.getMilliseconds();
                        var iTime = iYear + '-' + iMonth + '-' + iDay + ' ' + iHour + ':' + iMinutes + ':' + iSecond;
                        num++;
                        if (olist[i].moduleId == 1) {
                            var omoduleId = '学生管理'
                        } else {
                            var omoduleId = '院校管理'
                        }
                        if (olist[i].remindTypeId == 3) {
                            var oremindTypeId = '接受量提醒'
                        } else if (olist[i].remindTypeId == 2) {
                            var oremindTypeId = '转公共量提醒'
                        } else {
                            var oremindTypeId = '待跟进量提醒'
                        }
                        $('<tr><td>' + num + '</td><td>' + olist[i].empName + '</td><td>' + omoduleId + '</td><td>' + oremindTypeId + '</td><td>' + olist[i].remindContent + '</td><td>' + iTime + '</td><td id="Aonoff"><div class="but" kaiguan="' + olist[i].remindId + '"><p></p></div><i class="layui-icon layui-icon-delete " id="deleat" deleat="' + olist[i].remindId + '"></i></td></tr>').appendTo($(".tableText"))
                        if (olist[i].remindState == 1) {
                            $('.but:eq(' + i + ')').css('background', 'green').find('p').animate({
                                left: "50%",
                            }, 500)
                        } else if (olist[i].remindState == 2) {
                            $('.but:eq(' + i + ')').css('background', 'red').find('p').animate({
                                left: "0",
                            }, 500)
                        }
                    }
                    // 按钮

                    $('.tableText').on('click', '.but', function () {
                        remindId = $(this).attr('kaiguan')
                        m = $(this)
                        if ($(this).css('backgroundColor') == 'rgb(0, 128, 0)') {
                            oremindState = 2
                        } else {
                            oremindState = 1
                        }
                        $.ajax({
                            url: SetUrl.remind.pageApply,
                            type: 'get',
                            dataType: 'json',
                            data: {
                                method: 'remindUpdate',
                                remindId: remindId,
                                remindState: oremindState
                            },
                            success: function (data) {
                                if (data.code == 100) {
                                    if (m.css('backgroundColor') == 'rgb(0, 128, 0)') {
                                        this.onoff = false;
                                    } else {
                                        this.onoff = true;
                                    }
                                    alert('打开/关闭提醒');
                                    if (this.onoff == true) {
                                        m.css('background', 'green').find('p').animate({
                                            left: "50%",
                                        }, 500)
                                        this.onoff = false;
                                    } else {
                                        m.css('background', 'red').find('p').animate({
                                            left: "0",
                                        }, 500)
                                        this.onoff = true;
                                    }
                                }
                            }
                        })
                    })
                }
            },
            error: function (xhr, errorInfo) {
                console.log(errorInfo)
            }
        })
        //提醒人
        $.ajax({
            url: SetUrl.remind.pageApply,
            type: 'get',
            dataType: 'json',
            data: {
                empId: localStorage.getItem("empId"),
                method: 'remindEmp'
            },
            success: function (data) {
                if (data.code == 100) {
                    console.log(data)
                    var aresult = data.result;
                    for (var i = 0; i < aresult.length; i++) {
                        $('<option value="' + aresult[i].empid + '">' + aresult[i].empName + '</option>').appendTo($('#remindMan'));
                    }
                }
            }
        })

    })
    //添加提醒人
    $('.bottom').find('p').click(function () {
        if ($('#module').val() == '学生管理') {
            var omoduleId = 1
        } else {
            var omoduleId = 2
        }
        if ($('#remainThing').val() == '待跟进量提醒') {
            var oremindTypeId = 1
        } else if ($('#remainThing').val() == '转公共量提醒') {
            var oremindTypeId = 2
        } else {
            var oremindTypeId = 3
        }
        $.ajax({
            url: SetUrl.remind.pageApply,
            type: 'get',
            dataType: 'json',
            data: {
                method: 'remindAdd',
                moduleId: omoduleId,
                empId: $("#remindMan").val(),
                remindTypeId: oremindTypeId,
                remindContent: $("#remainText").val(),
                remindTime: $("#beginday").val() + " " + $("#beginday1").val()
            },
            success: function (data) {
                if (data.code == 100) {
                    location.reload();
                }
            }
        })
    })
    //时间排序
    var Tonoff = true;
    var Tonoff1 = true;
    $('#big').click(function () {
        if (Tonoff) {
            Tonoff = false;
            Tonoff1 = true;
            $('#big').css('color', 'blue');
            $('#small').css('color', '#9e9e9e');
        } else {
            $('#big').css('color', '#9e9e9e');
            Tonoff = true;
        }
        $.ajax({
            url: SetUrl.remind.pageApply,
            type: 'get',
            dataType: 'json',
            data: {
                currentPage: '1',
                asc: '1',
                rows: '10',
                method: 'remindAll'
            },
            success: function (data) {
                if (data.code == 100) {
                    console.log(data)
                    $(".tableText").html('');
                    var olist = data.result.list;
                    var num = 0;
                    for (var i = 0; i < olist.length; i++) {
                        var oremindTime = parseInt(olist[i].remindTime);
                        var newData = new Date(oremindTime);
                        var iYear = newData.getFullYear();
                        var iMonth = newData.getMonth() + 1;
                        var iDay = newData.getDate();
                        var iHour = newData.getHours();
                        var iMinutes = newData.getMinutes();
                        var iSecond = newData.getMilliseconds();
                        var iTime = iYear + '-' + iMonth + '-' + iDay + ' ' + iHour + ':' + iMinutes + ':' + iSecond;
                        num++;
                        if (olist[i].moduleId == 1) {
                            var omoduleId = '学生管理'
                        } else {
                            var omoduleId = '院校管理'
                        }
                        if (olist[i].remindTypeId == 3) {
                            var oremindTypeId = '接受量提醒'
                        } else if (olist[i].remindTypeId == 2) {
                            var oremindTypeId = '转公共量提醒'
                        } else {
                            var oremindTypeId = '待跟进量提醒'
                        }
                        $('<tr><td>' + num + '</td><td>' + olist[i].empName + '</td><td>' + omoduleId + '</td><td>' + oremindTypeId + '</td><td>' + olist[i].remindContent + '</td><td>' + iTime + '</td><td id="Aonoff"><div class="but" kaiguan="' + olist[i].remindId + '"><p></p></div><i class="layui-icon layui-icon-delete " id="deleat" deleat="' + olist[i].remindId + '"></i></td></tr>').appendTo($(".tableText"))
                        if (olist[i].remindState == 1) {
                            $('.but:eq(' + i + ')').css('background', 'green').find('p').animate({
                                left: "50%",
                            }, 500)
                        } else if (olist[i].remindState == 2) {
                            $('.but:eq(' + i + ')').css('background', 'red').find('p').animate({
                                left: "0",
                            }, 500)
                        }
                    }
                }
            }
        })
    })
    $('#small').click(function () {
        if (Tonoff1) {
            Tonoff1 = false;
            Tonoff = true;
            $('#small').css('color', 'blue');
            $('#big').css('color', '#9e9e9e');
        } else {
            $('#small').css('color', '#9e9e9e');
            Tonoff1 = true;
        }
        $.ajax({
            url: SetUrl.remind.pageApply,
            type: 'get',
            dataType: 'json',
            data: {
                currentPage: '1',
                asc: '2',
                rows: '10',
                method: 'remindAll'
            },
            success: function (data) {
                if (data.code == 100) {
                    console.log(data)
                    $(".tableText").html('');
                    var olist = data.result.list;
                    var num = 0;
                    for (var i = 0; i < olist.length; i++) {
                        var oremindTime = parseInt(olist[i].remindTime);
                        var newData = new Date(oremindTime);
                        var iYear = newData.getFullYear();
                        var iMonth = newData.getMonth() + 1;
                        var iDay = newData.getDate();
                        var iHour = newData.getHours();
                        var iMinutes = newData.getMinutes();
                        var iSecond = newData.getMilliseconds();
                        var iTime = iYear + '-' + iMonth + '-' + iDay + ' ' + iHour + ':' + iMinutes + ':' + iSecond;
                        num++;
                        if (olist[i].moduleId == 1) {
                            var omoduleId = '学生管理'
                        } else {
                            var omoduleId = '院校管理'
                        }
                        if (olist[i].remindTypeId == 3) {
                            var oremindTypeId = '接受量提醒'
                        } else if (olist[i].remindTypeId == 2) {
                            var oremindTypeId = '转公共量提醒'
                        } else {
                            var oremindTypeId = '待跟进量提醒'
                        }
                        $('<tr><td>' + num + '</td><td>' + olist[i].empName + '</td><td>' + omoduleId + '</td><td>' + oremindTypeId + '</td><td>' + olist[i].remindContent + '</td><td>' + iTime + '</td><td id="Aonoff"><div class="but" kaiguan="' + olist[i].remindId + '"><p></p></div><i class="layui-icon layui-icon-delete " id="deleat" deleat="' + olist[i].remindId + '"></i></td></tr>').appendTo($(".tableText"))
                        if (olist[i].remindState == 1) {
                            $('.but:eq(' + i + ')').css('background', 'green').find('p').animate({
                                left: "50%",
                            }, 500)
                        } else if (olist[i].remindState == 2) {
                            $('.but:eq(' + i + ')').css('background', 'red').find('p').animate({
                                left: "0",
                            }, 500)
                        }
                    }
                }
            }
        })
    })
    //省略的显现出来
    $('.tableText').on('mouseover', '#diShow', function (e) {
        var oP = $('<p>' + $(this).html() + '</p>');
        oP.addClass('textHiddden');
        $('body').append(oP);
        if (oP.width() > $(this).width()) {
            $('.textHiddden').css('display', 'block');
        }
        $('.tableText').on('mouseout', 'tr', function () {
            $('.textHiddden').detach();
        })
        oP.css({
            top: e.pageY - 60
        })
    })
    //删除
    $(".tableText").on('click', 'i', function () {
        remindId = $(this).attr('deleat')
        $.ajax({
            url: SetUrl.remind.pageApply,
            type: 'get',
            dataType: 'json',
            data: {
                method: 'remindUpdate',
                remindId: remindId,
                remindState: '3'
            },
            success: function (data) {
                if (data.code == 100) {
                    location.reload();
                }
            }
        })
    })



    //日历
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#beginday'
        });
    });
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#beginday1',
            type: 'time'
        });
    });
    //下拉
    lxcselector("#module", 2, ['学生管理', '院校管理']);
    lxcselector("#remainThing", 3, ['待跟进量提醒', '转公共量提醒', '接受量提醒']);
    function lxcselector(obj, t, lxcarr) {
        var lxc = $(obj).wrap("<div></div>").parent().css({
            display: " inline-block",
        });
        var xu = $("<ul>").appendTo(lxc);
        $(xu).css({
            position: 'absolute',
            width: "200px",
            border: "1px solid #ccc",
            boxShadow: " 0px 0px 10px 1px# ccc",
            background: " #fff",
            marginTop: "0px",
            marginLeft: "0px",
            borderRadius: "3px",
            paddingTop: "5px",
            display: "none",
            position: "absolute",
            zIndex: "1"
        });
        var x = $("<strong>").html(">").appendTo(lxc).css({
            display: "inline-block",
            position: 'relative',
            left: '90%',
            top: '-60px',
            transition: '1s',
            transform: 'rotateZ(90deg)',
        })
        $("<span>").appendTo(xu).css({
            display: "block",
            width: " 0px",
            height: " 0px",
            borderBottom: " 5px solid rgb(207, 203, 203)",
            borderLeft: "5px solid rgba(00, 00, 00, 0)",
            borderRight: " 5px solid rgba(00, 00, 00, 0)",
            borderTop: " 5px solid rgba(00, 00, 00, 0)",
            position: " absolute",
            marginLeft: " 34px",
            top: "-10px",
        });
        $("<span>").appendTo(xu).css({
            display: "block",
            width: " 0px",
            height: " 0px",
            borderBottom: " 5px solid rgb(255, 255, 255)",
            borderLeft: "5px solid rgba(00, 00, 00, 0)",
            borderRight: " 5px solid rgba(00, 00, 00, 0)",
            borderTop: " 5px solid rgba(00, 00, 00, 0)",
            position: " absolute",
            marginLeft: " 34px",
            top: "-9px"
        });
        for (var i = 0; i < t; i++) {
            var l = i;
            $("<li>").appendTo(xu).html(function (i, v) {
                return lxcarr[l]
            }).css({
                linHeight: "34px",
                height: "34px",
                textIndent: " 1.5em",
                lineHeight: '34px'
            }).hover(function (i, v) {
                $(this).css({
                    background: " #ccc"
                })
            }, function () {
                $(this).css({
                    background: ""
                })
            }).click(function () {
                $(obj).val($(this).html());
            });
        }

        $(obj).click(function () {
            $(x).css({
                transform: 'rotateZ(270deg)',
            })
            $(xu).slideDown(500);
        })
        $(obj).blur(function () {
            $(x).css({
                transform: 'rotateZ(90deg)',
            })
            $(xu).slideUp(500);
        })
    }
</script>

</html>